<template>
    <div class="content">
        <p>修改密码</p>
        <div class="content_item">
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-position="right"
                label-width="auto" class="demo-ruleForm">
                <el-form-item label="原密码" prop="oldPass">
                    <el-input type="password" v-model.number="ruleForm.oldPass" />
                </el-form-item>
                <el-form-item label="新密码" prop="newPass">
                    <el-input v-model="ruleForm.newPass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">确认修改</el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import { post } from "@/http/request";
import router from '@/router';

const ruleFormRef = ref<FormInstance>()

// 原密码
const oldPassword = (rule: any, value: any, callback: any) => {
    if (!value) {
        return callback(new Error('请输入原密码'))
    }else{
        callback()
    }
}

// 新密码
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入新密码'))
    } else {
        if (ruleForm.checkPass !== '') {
            if (!ruleFormRef.value) return
            ruleFormRef.value.validateField('checkPass', () => null)
        }
        callback()
    }
}
// 确认密码
const validatePass2 = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请重新输入密码'))
    } else if (value !== ruleForm.newPass) {
        callback(new Error("两次密码输入不匹配！"))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    oldPass: '',//原密码
    newPass: '',// 新密码
    checkPass: '',// 确认密码
})

// 验证规则
const rules = reactive({
    oldPass: [{ validator: oldPassword, trigger: 'blur' }],//原密码
    newPass: [{ validator: validatePass, trigger: 'blur' }],// 新密码
    checkPass: [{ validator: validatePass2, trigger: 'blur' }],// 确认密码
})

// 确认按钮
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            let data = {
                _gp:"admin",
                _mt:"newPassword",
                oldPassword :ruleForm.oldPass,
                newPassword:ruleForm.newPass
            }
            post(data).then(res=>{
                console.log(res);
                let {errmsg,errno} = res
                if(200==errno){
                    ElMessage.success('修改成功')
                    router.replace('/login')
                }else{
                    ElMessage.error(errmsg)
                }
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}

// 重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>

<style lang="less" scoped>
.content {
    width: 50vw;
    margin: auto;
    box-shadow: 1px 1px 10px 2px #ccc;
    border-radius: 10px;

    p {
        border-bottom: 1px solid #ccc;
        padding: 15px;
        font-weight: bold;

    }

    .content_item {
        padding: 30px 40px;

    }

    /deep/ .el-form-item__content {
        display: flex;
        justify-content: center;
    }
}
</style>